/**
 * 教员课时统计列表
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="sjKsrq">
							<template #label><vp-label zh="培训日期" en="Training Date"/></template>
							<el-date-picker
								v-model="searchForm.sjKsrq"
								type="daterange"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
								clearable
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ksfbs">
							<template #label><vp-label zh="是否有课时费" en="Class Hour Fee" /></template>
							<el-select v-model="searchForm.ksfbs" clearable>
								<el-option :value="10" label="是"></el-option>
                            	<el-option :value="20" label="否"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jyxm">
							<template #label><vp-label zh="教员" en="Trainer" /></template>
							<el-input v-model="searchForm.jyxm" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #table>
			<vp-vxe-table
				id="trainingTeacherTimeStatisticsTable"
				ref="tableRef" 
				:data="tableData" 
				row-key="id"
				v-loading="loading"
				show-footer
				:footer-data="footerData"
				:merge-footer-items="mergeFooterItems"
			>	
				<vxe-column field="seq" type="seq" align="center" title="#" width="50">
					<template #footer="{ row }">
						<div style="text-align: left;">{{ row.seq }}</div>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="dabh" 
					title="教员 Trainer"
					show-overflow 
					width="140"
				>
					<template #header><vp-label zh="教员" en="Trainer" /></template>
					<template #default="{ row }">
						<el-link @click="handleViewPersonnelFile(row.jydaid)">{{ row.dabh + ' ' + row.jyxm }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="sjKsrq" 
					title="培训开始时间 Training Start Time"
					show-overflow
					width="160"
				>
					<template #header><vp-label zh="培训开始时间" en="Training Start Time" /></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="sjJsrq" 
					title="培训结束时间 Training End Time"
					show-overflow
					width="160"
				>
					<template #header><vp-label zh="培训结束时间" en="Training End Time" /></template>
				</vxe-column>
				<vxe-column 
					field="pxbh" 
					title="培训编号 Training No."
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="培训编号" en="Training No." /></template>
					<template #default="{ row }">
						<el-link @click="handleViewTrainingPlan(row.id)">{{ row.pxbh }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="kcbh" 
					title="课程编号 Course No."
					show-overflow
					width="120"
				>
					<template #header><vp-label zh="课程编号" en="Course No."/></template>
					<template #default="{ row }">
						<el-link @click="handleViewCourse(row.kcid)">{{ row.kcbh }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					field="kcmc_zw" 
					title="课程名称 Course Name"
					show-overflow 
					width="200"
				>
					<template #header><vp-label zh="课程名称" en="Course Name" /></template>
					<template #default="{ row }">
						<span>{{ (row.kcmcZw || '') + ' ' + (row.kcmcYw || '') }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="sjks" 
					title="培训课时 Class Hour"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="培训课时" en="Class Hour" /></template>
					<template #default="{ row }">
						<span>{{ row.sjks || row.sjks == 0 ? row.sjks + 'Hrs' :'' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="ksfbs" 
					title="是否有课时费 Class Hour Fee"
					show-overflow 
					width="140"
				>
					<template #header><vp-label zh="是否有课时费" en="Class Hour Fee" /></template>
					<template #default="{ row }">
						<span>{{ row.ksfbs === 10 ? '是' : row.ksfbs === 20 ? '否' : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="kclb" 
					title="课程类别 Course Category"
					show-overflow 
					width="130"
				>
					<template #header><vp-label zh="课程类别" en="Course Category"/></template>
				</vxe-column>
				<vxe-column 
					field="pxxs" 
					title="培训形式 Training Format"
					show-overflow 
					width="120"
				>
					<template #header><vp-label zh="培训形式" en="Training Format" /></template>
				</vxe-column>
				<vxe-column 
					field="ksxs" 
					title="考试形式 Exam Format"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="考试形式" en="Exam Format" /></template>
				</vxe-column>
				<vxe-column 
					field="cxry" 
					title="参训学员 Participants"
					show-overflow 
					width="300"
				>
					<template #header><vp-label zh="参训学员" en="Participants"/></template>
				</vxe-column>
			</vp-vxe-table>
		</template>
	</vp-main-page>
</template>
<script setup lang="ts" name="trainingTeacherTimeStatistics">
import { computed, onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';

const searchForm = reactive({
	sjKsrq: [new Date().getFullYear() + '-01-01', new Date().getFullYear()+ '-12-31'],
	ksfbs: [],
	jyxm: "",
});

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	loading.value = true;
	request.get('/training/teacherTimeStatistics/list', {
		params: {
			...searchForm,
		}
	}).then(res => {
		tableData.value = res?.data || [];
		mergeFooterItems.value = [
			{ row: 0, col: 0, rowspan: 1, colspan: 13 },
		]
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

onMounted(() => {
	loadDataList();
})

const tableRef = ref();

// 查看培训计划
const handleViewTrainingPlan = (id: string)=>{
	router.push({
		name: "viewTrainingPlan",
		params: {
			id: id,
		},
	})
}

// 查看课程
const handleViewCourse = (id: string)=>{
	router.push({
		name: "viewTrainingCourse",
		params: {
			id: id,
		},
	})
}

// 查看人员档案
const handleViewPersonnelFile = (id: string) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: id,
		},
	})
}

// 表尾数据
const footerData = computed(() => {
	let total = 0;
	tableData.value.forEach((row: any) => {
		total += (row.sjks || 0);
	})
	return [
		{ seq: '课时合计：' + parseFloat(total.toFixed(2)) + 'Hrs' }
	]
});


// 表尾合并
const mergeFooterItems = ref();

</script>

<style scoped lang="scss">
</style>